<template>
  <div class="">
    <el-dialog
      v-model="operate.open"
      width="900px"
      append-to-body
      @close="cancelAddOrEdit"
      :close-on-click-modal="false"
    >
      <template #header>
        <div class="dialog_title">
          <div class="blueLine"></div>
          <div class="title">
            {{ operate.title }}

            <span style="font-size: 12px; color: red" v-if="operate.openKey == 'edit'">{{
              t("assetsList.editTip")
            }}</span>
          </div>
        </div>
      </template>

      <el-form
        :model="operate.FormInfo"
        :rules="operate.rules"
        ref="operateFormInfoRef"
        label-width="140px"
      >
        <h3>{{ t("assetsList.basicInfo") }}</h3>
        <el-row>
          <el-col v-if="operate.openKey == 'edit'" :span="12">
            <el-form-item :label="t('assetsList.assetCode')" prop="assetsCode">
              <el-input
                :disabled="operate.openKey != 'add'"
                v-model="operate.FormInfo.assetsCode"
                :placeholder="t('assetsList.assetCodePlaceholder')"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('assetsList.assetName')" prop="assetsName">
              <el-input
                :disabled="operate.openKey != 'add'"
                v-model="operate.FormInfo.assetsName"
                :placeholder="t('assetsList.assetNamePlaceholder')"
                style="width: 100%"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              :label="t('assetsList.assetType')"
              :prop="operate.openKey == 'add' ? 'assetsClassifyId' : 'assetsClassifyName'"
            >
              <el-select
                v-if="operate.openKey == 'add'"
                v-model="operate.FormInfo.assetsClassifyId"
                :placeholder="t('assetsList.assetTypePlaceholder')"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in operate.assetsClassifyOptions"
                  :key="item.dictionaryKey"
                  :label="item.dictionaryName"
                  :value="item.dictionaryCode"
                ></el-option>
              </el-select>
              <el-input
                v-else
                disabled
                v-model="operate.FormInfo.assetsClassifyName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              :label="t('assetsList.organization')"
              :prop="
                operate.openKey == 'add'
                  ? 'ownershipOrganizationalId'
                  : 'ownershipOrganizationalName'
              "
            >
              <el-tree-select
                v-if="operate.openKey == 'add'"
                style="width: 100%"
                clearable
                v-model="operate.FormInfo.ownershipOrganizationalId"
                :data="operate.organizeOptions"
                @node-click="organizeNodeClick($event, 'ownershipOrganization')"
                :props="{
                  label: 'Label',
                  children: 'children',
                  value: 'value',
                }"
                :placeholder="t('assetsList.orgPlaceholder')"
                check-strictly
                :render-after-expand="false"
              />

              <el-input
                v-else
                disabled
                v-model="operate.FormInfo.ownershipOrganizationalName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="t('assetsList.keeper')"
              :prop="
                operate.openKey == 'add' ? 'storekeeperUserId' : 'storekeeperUserName'
              "
            >
              <el-select
                v-if="operate.openKey == 'add'"
                clearable
                v-model="operate.FormInfo.storekeeperUserId"
                filterable
                :placeholder="
                  operate.FormInfo.ownershipOrganizationalId
                    ? t('assetsList.keeperPlaceholder')
                    : t('assetsList.orgFirstPlaceholder')
                "
                :loading="operate.loadingCustodian"
                style="width: 100%"
              >
                <el-option
                  v-for="item in operate.storekeeperUserOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                />
              </el-select>
              <el-input
                v-else
                disabled
                v-model="operate.FormInfo.storekeeperUserName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="t('assetsList.usageOrganization')"
              :prop="
                operate.openKey == 'add' ? 'useOrganizationId' : 'useOrganizationName'
              "
            >
              <el-tree-select
                clearable
                v-if="operate.openKey == 'add'"
                v-model="operate.FormInfo.useOrganizationId"
                :data="operate.organizeOptions"
                check-strictly
                @node-click="organizeNodeClick($event, 'useOrganization')"
                :placeholder="t('assetsList.useOrgPlaceholder')"
                :props="{
                  label: 'Label',
                  children: 'children',
                  value: 'value',
                }"
                :render-after-expand="false"
                style="width: 100%"
              />

              <el-input
                v-else
                disabled
                v-model="operate.FormInfo.useOrganizationName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="t('assetsList.useUser')"
              :prop="operate.openKey == 'add' ? 'useUserId' : 'useUserIdName'"
            >
              <el-select
                clearable
                v-if="operate.openKey == 'add'"
                v-model="operate.FormInfo.useUserId"
                filterable
                :placeholder="
                  operate.FormInfo.useOrganizationId
                    ? t('assetsList.userPlaceholder')
                    : t('assetsList.keeperPlaceholder')
                "
                :loading="operate.loadingUser"
                style="width: 100%"
              >
                <el-option
                  v-for="item in operate.useUserOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                />
              </el-select>

              <el-input
                v-else
                disabled
                v-model="operate.FormInfo.useUserName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              :label="t('assetsList.area')"
              :prop="operate.openKey == 'add' ? 'regionId' : 'regionName'"
            >
              <el-tree-select
                clearable
                v-if="operate.openKey == 'add'"
                :placeholder="t('assetsList.regionPlaceholder')"
                v-model="operate.FormInfo.regionId"
                :data="operate.areaOptions"
                check-strictly
                :render-after-expand="false"
                style="width: 100%"
                :props="{
                  label: 'Label',
                  children: 'children',
                  value: 'value',
                }"
              />

              <el-input
                v-else
                disabled
                v-model="operate.FormInfo.regionName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="t('assetsList.source')"
              :prop="operate.openKey == 'add' ? 'assetsSourceId' : 'assetsSourceName'"
            >
              <el-select
                v-if="operate.openKey == 'add'"
                clearable
                v-model="operate.FormInfo.assetsSourceId"
                :placeholder="t('assetsList.sourcePlaceholder')"
                style="width: 100%"
              >
                <el-option
                  v-for="item in operate.assetSourcesOptions"
                  :key="item.dictionaryKey"
                  :label="item.dictionaryName"
                  :value="item.dictionaryCode"
                />
              </el-select>

              <el-input
                v-else
                disabled
                v-model="operate.FormInfo.assetsSourceName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <h3>{{ t("assetsList.otherInfo") }}</h3>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="t('assetsList.location')" prop="storageLocation">
              <el-input
                clearable
                :disabled="operate.openKey == 'detail'"
                v-model="operate.FormInfo.storageLocation"
                :placeholder="t('assetsList.locationPlaceholder')"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('assetsList.model')" prop="specModel">
              <el-input
                clearable
                :disabled="operate.openKey == 'detail'"
                v-model="operate.FormInfo.specModel"
                :placeholder="t('assetsList.modelPlaceholder')"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="t('assetsList.unit')" prop="unitId">
              <el-select
                clearable
                :disabled="operate.openKey == 'detail'"
                @change="changeUnitId"
                v-model="operate.FormInfo.unitId"
                :placeholder="t('assetsList.unitPlaceholder')"
                style="width: 100%"
              >
                <el-option
                  v-for="item in operate.unitOptions"
                  :key="item.dictionaryKey"
                  :label="item.dictionaryName"
                  :value="item.dictionaryCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('assetsList.value')" prop="assetsCost">
              <el-input
                clearable
                type="text"
                :disabled="operate.openKey == 'detail'"
                v-model.number="operate.FormInfo.assetsCost"
                :placeholder="t('assetsList.valuePlaceholder')"
                @input="assetsCostInput"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="t('assetsList.usagePeriod')" prop="serviceLife">
              <el-input
                clearable
                :disabled="operate.openKey == 'detail'"
                v-model="operate.FormInfo.serviceLife"
                :placeholder="t('assetsList.usagePeriod')"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('assetsList.purchaseDate')" prop="purchaseDate">
              <el-date-picker
                clearable
                :disabled="operate.openKey == 'detail'"
                v-model="operate.FormInfo.purchaseDate"
                :disabled-date="disabledDate"
                type="date"
                :placeholder="t('assetsList.purchaseDatePlaceholder')"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="t('assetsList.supplier')" prop="supplierName">
              <el-input
                :disabled="operate.openKey == 'detail'"
                clearable
                v-model="operate.FormInfo.supplierName"
                :placeholder="t('assetsList.supplierPlaceholder')"
                maxlength="100"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('assetsList.manufacturer')" prop="manufacturerName">
              <el-input
                :disabled="operate.openKey == 'detail'"
                clearable
                v-model="operate.FormInfo.manufacturerName"
                :placeholder="t('assetsList.manufacturerPlaceholder')"
                maxlength="100"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="t('assetsList.remark')" prop="remark">
              <el-input
                :disabled="operate.openKey == 'detail'"
                type="textarea"
                clearable
                v-model="operate.FormInfo.remark"
                :placeholder="t('assetsList.remarkPlaceholder')"
                maxlength="200"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="operate.openKey != 'detail'"
            type="primary"
            @click="submitAddOrEdit"
            :loading="operate.addLoading"
            >{{ t("common.confirm") }}</el-button
          >
          <el-button @click="cancelAddOrEdit">
            {{ operate.openKey != "detail" ? t("common.cancel") : t("common.close") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { nextTick } from "vue";

const emit = defineEmits([
  "submitAddOrEdit",
  "cancelAddOrEdit",
  "organizeNodeClick",
  "changeUnitId",
]);
const { proxy } = getCurrentInstance();

// const operateFormInfoRef = ref(null)
const props = defineProps({
  operate: {
    type: Object,
    default: true,
  },
});

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const resetAddOrEdit = () => {
  nextTick(() => {
    if (proxy.$refs.operateFormInfoRef) {
      proxy.$refs.operateFormInfoRef.resetFields();
      proxy.$refs.operateFormInfoRef.clearValidate();
    }
  });
};

const assetsCostInput = (value) => {
  props.operate.FormInfo.assetsCost = proxy.costInput(value);
};

const submitAddOrEdit = () => {
  proxy.$refs["operateFormInfoRef"].validate((valid) => {
    if (!valid) return;
    emit("submitAddOrEdit", props.operate.FormInfo);
  });
};
const cancelAddOrEdit = () => {
  resetAddOrEdit();

  emit("cancelAddOrEdit", props.operate.FormInfo);
};

const organizeNodeClick = (e, key) => {
  emit("organizeNodeClick", e, key);
};

const changeUnitId = (e) => {
  emit("changeUnitId", e);
};
</script>

<style lang="scss" scoped>
.dialog_title {
  display: flex;
  font-weight: 700;

  .blueLine {
    color: #1065ff;
    background: #1065ff;
    width: 5px;
    height: auto;
    border-radius: 3px;
    margin-right: 10px;
  }
  .title {
    color: #000;
  }
}
</style>
